<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:include="css :: css">

</head>
<link href="/css/custom.css" rel="stylesheet">
<body style="overflow: hidden;opacity: 1">

<div id="cl-wrapper" style="padding-top: 0">
    <div class="container-fluid">
        <div class="cl-mcont">
            <div class="row">
                <div class="col-md-12">
                    <div class="block-flat">
                        <form class="form-horizontal group-border-dashed" onsubmit="return false;">
                            <div class="form-group">
                                <div class="input-group">
                                    <button class="btn btn-primary" type="button" id="search"><i
                                            class="fa fa-search"></i>刷新
                                    </button>&nbsp;
                                    <button class="btn btn-success" type="button" id="success"
                                            onclick="updateStatus(1)"><i class="fa fa-plus-square-o"></i>开启
                                    </button>&nbsp;
                                    <button class="btn btn-warning btn-operation" type="button" id="update"
                                            onclick="updateStatus(0)"><i class="fa fa-plus-square-o"></i>关闭
                                    </button>&nbsp;
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="block-flat">
                        <div class="content">
                            <div class="table-responsive">
                                <table class="table hover" id="dataTable">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<div th:include="js :: js"></div>
<script type="text/javascript" th:attr="src=@{/js/jquery.form.js}"></script>
<script type="text/javascript" th:attr="src=@{/js/jquery.parser.js}"></script>
<script type="text/javascript" src="js/jquery.icheck/icheck.min.js"></script>
<script>
    $(function () {
        $('#dataTable').bootstrapTable({
            url: '/CardProductController/queryCardTypePage',
            height: $(window).height() - 200,
            pageSize: 30,
            pagination: true,
            pageList: [30, 50, 100],
            clickToSelect: true,
            singleSelect: true,
            queryParams: queryParams,
            uniqueId: 'id',
            queryParamsType: '',
            sidePagination: 'server',
            responseHandler: function (res) {
                return {
                    "total": res.total,
                    "rows": res.resultList
                };
            },
            columns: [
                {
                    checkbox: true
                },
                {
                    align: 'center',
                    formatter: function (v, row, index) {
                        return index + 1
                    }
                }, {
                    align: 'center',
                    field: 'cardTypeName',
                    title: '卡类型'
                }, {
                    align: 'center',
                    field: 'status',
                    title: '状态',
                    formatter: function (v) {
                        return {
                            1: "<span style='color:black;'>开启</span>",
                            0: "<span style='color:red;'>关闭</span>"
                        }[v];
                    }
                }, {
                    align: 'center',
                    field: 'gmtModifiedTime',
                    title: '操作时间'
                }, {
                    align: 'center',
                    field: 'remark',
                    title: '备注'
                }
            ]
        });

        $("#search").click(function () {
            $("#dataTable").bootstrapTable("refresh");
        });
    });

    function updateStatus(status) {
        var rows = $('#dataTable').bootstrapTable("getSelections");
        if (rows == null || rows.length == 0) {
            layer.msg("请选择要操作的数据");
            return;
        }
        if (rows.length > 1) {
            layer.msg("只能选择一个卡类型");
            return;
        }
        $.ajax({
            type: "POST",
            url: '/CardProductController/updateCardTypeStatus',
            data: {
                id: rows[0].id,
                status: status
            },
            dataType: "json",
            success: function (data) {
                if (data.success) {
                    layer.msg("操作成功");
                } else {
                    layer.msg(data.message)
                }
                $("#dataTable").bootstrapTable("refresh");
            }
        });
    }

    function queryParams(params) {
        return {
            size: params.pageSize,
            page: params.pageNumber
        };
    }
</script>
</body>
</html>
